<template>
    <view :class="[JkClass, 'jk-switch', setSize, setCurrent]" @tap="toggle">
        <input type="text" :name="name" :value="label" class="jk-switch-hide-input"></input>
        <view class="jk-switch-inner" v-if="value === true">
            <slot name="open"></slot>
        </view>
        <view class="jk-switch-inner" v-else>
            <slot name="close"></slot>
        </view>
    </view>
</template>

<script>
    const prefixCls = 'jk-switch';
    export default {
        name: 'Switch',
        model: {
            event: 'change',
            prop: 'value'
        },
        props: {
            value: {
                type: Boolean,
                default: false
            },
            //large small default
            size: {
                type: String,
                default: 'default'
            },
            // is or not disable
            disabled: {
                type: Boolean,
                default : false
            },
            // hidden inut name
            name : {
                type: String,
                default: ''
            },
            //自定义class
            JkClass: {
                type: String,
                default: ''
            }
        },
        data(){
            return {
                label: ''
            }
        },
        methods: {
            toggle(){
                if( this.disabled ) return;
                this.label = this.label === 'true' ? 'false' : 'true';
                const value = this.label === 'true' ? true : false;
                this.$emit('change',  value)
            },
            
        },
        computed: {
            setSize() {
                const sizes = ['large', 'default'];
            
                var index = sizes.indexOf(this.size);
                return prefixCls + (index > -1 ? ('-' + this.size) : 'default')
            },
            setCurrent() {
                const value = this.label === 'true' ? true : false;
                var className = value && !this.disabled ? prefixCls + '-checked' : '';
                if (this.disabled) {
                    className += ' ' + prefixCls + '-disabled';
                }
                return className;
            }
        },
        watch: {
            label: {
                handler(val){
                    this.label = val.toString();
                },
                immediate: true
            }
        }
    }
</script>

<style lang="scss">
    .jk-switch {
        display: inline-block;
        width: 48px;
        height: 24px;
        line-height: 24px;
        border-radius: 24px;
        vertical-align: middle;
        border: 1px solid #ccc;
        background-color: #ccc;
        position: relative;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all .2s ease-in-out;
        &-hide-input {
            display: none;
            opacity: 0
        }
        &-inner {
            color: #fff;
            font-size: 12px;
            position: absolute;
            left: 25px;
            vertical-align: middle
        }
    }

    

    

    .jk-switch:after {
        content: '';
        width: 22px;
        height: 22px;
        border-radius: 22px;
        background-color: #fff;
        position: absolute;
        left: 1px;
        top: 1px;
        cursor: pointer;
        transition: left .2s ease-in-out, width .2s ease-in-out
    }

    .jk-switch-checked:after {
        left: 8px;
    }

    .jk-switch-large {
        width: 60px;
    }

    .jk-switch-large.jk-switch-checked:after {
        left: 37px;
    }

    .jk-switch-checked:after {
        left: 25px;
    }

    .jk-switch-checked {
        border-color: #2d8cf0;
        background-color: #2d8cf0;
    }

    .jk-switch-checked .jk-switch-inner {
        left: 8px;
    }

    .jk-switch-checked:after {
        left: 25px;
    }

    .jk-switch-disabled {
        background: #f3f3f3;
        border-color: #f3f3f3;
    }

    .jk-switch-disabled:after {
        background: #ccc;
        cursor: not-allowed;
    }

    .jk-switch-disabled .jk-switch-inner {
        color: #ccc;
    }
</style>
